<script lang="ts" setup>
import {Aim,Setting,Document,Check} from '@element-plus/icons-vue'

import type {DetailRecordType} from '../../../type/EditType'
import {ref,onMounted} from 'vue'
import {BroadCaster} from '@/utils/BroadCaster'

let start = Date.now();
// 实时监听添加任务的事件
const onChangeAddTaskPanel = (obj:any)=>{
  // 手动计算操作间隔的时间
  let interval = 0.0;
  if(DetailRecordList.value.length !=0){
    interval = (Date.now() / 1000) - (start / 1000);
  }
  start = Date.now();
  
  obj.interval = interval.toFixed(1);

  let f = DetailRecordList.value.filter((t:any)=>t.id==obj.id);
  if(f.length>0){
    f[0] = obj;
  }else{
    DetailRecordList.value.push(obj)
  }
}
// 监听需要高亮的一项
const onChangeHighLight = (item:any)=>{
  DetailRecordList.value = []
  BroadCasterObj.RemindFn("onChangeTaskClearLayer",item)
  BroadCasterObj.RemindFn("onChangeEditClearLayer",item)
}

let BroadCasterObj = new BroadCaster()
// 广播器中注册函数
BroadCasterObj.addFn("onChangeAddTaskPanel",onChangeAddTaskPanel)
// 注册任务更换监听
BroadCasterObj.addFn("onChangeHighLight",onChangeHighLight)

// 追踪图型
const trackGraphic = (item:any)=>{
  BroadCasterObj.RemindFn("onChangeTrackGraphic",item)
}
// 修改图形的值
const SettingGraphic = (item:any)=>{
  BroadCasterObj.RemindFn("onChangeSettingGraphic",item)
}
// 具体步骤的数据
let DetailRecordList = ref<DetailRecordType[]>([])

onMounted(() => {
    initital()
});
const initital = ()=>{
  // 初始化绘制图形
  let arr = DetailRecordList.value;
  arr.forEach((t:any,i:number)=>{
    BroadCasterObj.RemindFn("onChangeSettingGraphic",t)
  })
}
// 保存绘制的数据
let saveDrawData = ()=>{
  BroadCasterObj.RemindFn("onChangeSaveDrawData",DetailRecordList.value)
}
</script>
<template>
  <div class="detailRecord">
    <div class="detailRecordBox">
        <div class="RecordTitle">
            <span>具体步骤</span>
            <div class="RecordTitleBtn">
              <el-tooltip
                effect="dark"
                content="保存"
                placement="top-start">
                <el-icon @click="saveDrawData"><Check /></el-icon>
              </el-tooltip>
            </div>
        </div>
        <div class="RecordContent">
            <el-scrollbar height="calc(100% - 27px)">
                <ul class="RecordContentList">
                    <li v-for="(item,index) in DetailRecordList" :key="index">
                        <div class="RecordListDiv">
                            <div class="RecordListDivList">
                                <el-icon><Document /></el-icon>
                                <span><input v-model="item.name" class="RecordList_inp" /></span>
                                <p>间隔<b>{{ item.interval }}s</b></p>
                            </div>
                            <div class="RecordListDivRight">
                                <el-icon @click="trackGraphic(item)"><Aim /></el-icon> 
                                <el-icon @click="SettingGraphic(item)"><Setting /></el-icon>
                            </div>
                        </div>
                    </li>
                </ul>
            </el-scrollbar>
        </div>
    </div>
  </div>
</template>
<style scoped>
  .detailRecord{
    position: absolute;
    width: 400px;
    height: 39%;
    background-color: #488adb75;
    border-radius: 10px;
    bottom: 1%;
    z-index: 100;
    left: 1%;
  }
  .detailRecordBox{
    width: 100%;
    height: 100%;
  }
  .RecordTitle{
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    position: relative;
  }
  .RecordTitle::before{
    content: '';
    width: 5px;
    height: 63%;
    position: absolute;
    left: 5%;
    top: 23%;
    background-color: #50abf5;
  }
  .RecordTitle span{
    margin-left: 32px;
    color: #6ac9ff;
  }
  .RecordTitleBtn{
    position: absolute;
    right: 6%;
    top: 7%;
  }
  .RecordTitleBtn i{
    font-size: 20px;
    cursor: pointer;
  }
  .RecordContent{
    height: calc(100% - 40px);
    width: 100%;
  }
  .RecordContentList{
    width: 90%;
    margin: auto;
    list-style-type: none;
  }
  .RecordContentList li{
    padding: 10px 0;
    border-bottom: 1px solid;
    border-image: radial-gradient(#fafbff, #fcfcfc00) 5;
    cursor: pointer;
  }
  .RecordListDiv{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #fff;
  }
  .RecordListDivList{
    width: 72%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .RecordListDivList i{
    font-size: 21px;
    flex: 1;
    margin-right: 10px;
  }
  .RecordListDivList span{
    margin-right: 12px;
    flex: 2;
  }
  .RecordListDivList p{
    flex: 1;
    color: #dadada;
  }
  .RecordListDivList p b{
    margin-left: 5px;
  }
  .RecordListDivRight{
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .RecordListDivRight i{
    font-size: 18px;
    margin: 0 6px;
  }
  .RecordList_inp{
    background-color: rgba(0, 0, 0, 0);
    border: none;
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 15px;
    padding: 1px 3px;
  }
  .RecordList_inp:focus{
    outline: none;
  }
</style>
